<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>我的购物车-小米商城</title>
		<link rel="icon" href="//s01.mifile.cn/favicon.ico"/>
		<link rel="stylesheet" href="css/style.css" />
		<script type="text/javascript" src="js/vue.js" ></script>
		<script type="text/javascript" src="js/axios.min.js" ></script>
		<script type="text/javascript" src="js/jquery-3.3.1.min.js" ></script>
		<script type="text/javascript" src="js/web.js" ></script>		
	</head>
	<body>
	<!-- start header -->
	<!--end header -->
		<div id="app">
<!-- start banner_x -->
		<div class="banner_x center">
			<a href="index.html" target="_blank"><div class="logo fl"></div></a>
			
			<div class="wdgwc fl ml40">我的购物车</div>
			<div class="wxts fl ml20">温馨提示：产品是否购买成功，以最终下单为准哦，请尽快结算</div>
			<div class="dlzc fr">
				<ul>
					<li><a style="cursor:pointer" v-on:click="jump()" target="_blank">{{omg}}</a></li>
					<li>|</li>
					<li><a href="./register.html" target="_blank">注册</a></li>	
				</ul>
				
			</div>
			<div class="clear"></div>
		</div>
		<div class="xiantiao"></div>
		<div class="gwcxqbj" style="width:100%;min-height: 470px;" >
			<div class="gwcxd center" style="width:80%;min-height: 150px;" >
				<div class="top2 center"style="width:100%;"  >
					<div class="sub_top fl classfix">
						<input type="checkbox" v-model="checkBox.checked" class="quanxuan" @click='checkedAll(index,$event)'/>全选
					</div>
					<div class="sub_top fl" style="margin-left: 40px;">商品图片</div>
					<div class="sub_top fl " style="margin-left: 40px;">商品名称</div>
					
					<div class="sub_top fl " style="margin-left: 40px;">规格</div>
					<div class="sub_top fl " style="margin-left: 40px;">单价</div>
					<div class="sub_top fl " style="margin-left:40px;">数量</div>
					<div class="sub_top fl " style="margin-left: 40px;">小计</div>
					<div class="sub_top f1 " style="float: left;margin-left: 40px">操作</div>
					<div class="clear"></div>
				</div>
				<div class="content2 center  clearfix" v-for="(p,index) in list" style="width:100%;" >
					<div class="sub_content fl ">
						<input type="checkbox" name="box" class="quanxuan" @click="checkItem(index,p,$event)" value="p"  v-model='checkBox.items[p.carId]'/>
					</div>
					<div class="sub_content fl" style="margin-left: 40px;"><img v-bind:src='web_photo_server+p.productPhoto'></div>
					<div class="sub_content fl ft20" style="font-size: 15px;margin-left: 60px;text-align: center;">{{p.productName}}</div>
					<div class="sub_content fl ft20 " style="width:130px;margin-left: 2px;font-size: 15px;">{{p.productStandard}}+{{p.productColor}}</div>
					<div class="sub_content fl "style="width:120px;margin-left: 20px;" name="oneprice" v-bind:value="p.productPrice">{{p.productPrice}}</div>
					<div class="sub_content fl" style="width:120px;margin-left: 20px;">
						<input type="button" value="—"  v-on:click="minus(p,index)" style="width: 25px;height: 24px;text-align: center;font-size:16px;color:#ff6700;"/>
						<input name="pnumber" class="shuliang" type="tel" v-model="p.carProductCount"   v-on:change="changeNumber(p,$event)"/>
						<input type="button" value="+"  v-on:click="add(p,index)" style="width: 25px;height: 24px;text-align: center;font-size:16px;color:#ff6700;"/>
					</div>
					<div class="sub_content fl" name="onetotalprice"  style="width:120px;margin-left: 20px;">{{p.productPrice*p.carProductCount}}元</div>
					<div class="sub_content fl" style="margin-left: 20px;"><i v-on:click="remove(p)" style="font-family: '微软雅黑';">移除</i></div>
					<div class="clear"></div>
				</div>
				

			</div>
			<div class="jiesuandan mt20 center" style="width:100%;" >
				<div class="tishi fl ml20" >
					<ul>
						
						<li v-on:click="search()"><a href="#">继续购物</a></li>
						<li>|</li>
						<li>共<span>{{total_count}}</span>件商品，已选择<span>{{geshu}}</span>件</li>
						<div class="clear"></div>
					</ul>
				</div>
				<div class="jiesuan fr">
					<div class="jiesuanjiage fl">合计（不含运费）：<span>{{totalprice}}.00元</span></div>
					<div class="jsanniu fr"><a><input class="jsan" type="button" name="jiesuan"  value="去结算" @click="close_an_account"/></a></div>
					<div class="clear"></div>
				</div>
				<div class="clear"></div>
			</div>
			
		</div>

  	</div>

	
	<!-- footer -->
	<footer class="center">
			
			<div class="mt20">小米商城|MIUI|米聊|多看书城|小米路由器|视频电话|小米天猫店|小米淘宝直营店|小米网盟|小米移动|隐私政策|Select Region</div>
			<div>©mi.com 京ICP证110507号 京ICP备10046444号 京公网安备11010802020134号 京网文[2014]0059-0009号</div> 
			<div>违法和不良信息举报电话：151-3503-4757，本网站所列数据，除特殊说明，所有数据均出自昭平科技实验室测试</div>
		</footer>

	</body>
	<script>
		
		new Vue({
			el:"#app",
			data:{
				list:[],
				web_server:window.web_server+"api/cart/",
				web_photo_server:window.web_server_static,
				onetotalprice:'',
				checkBox:{
			        checked:true,
			        items:[],
			   		price:[],
			   },
			   jige:[],
			   totalprice:0,
			   carids:[],
			   geshu:0,
			   userId:'',
			   wzwcount:0,
			   wzwprice:0,
			   itemchecked:true,
			   p:{
			   		carProductCount:[],
			   },
			   uuu:window.sessionStorage.getItem('loginUsername'),
			   omg:'',
			   lmuid:window.sessionStorage.getItem("loginUserid"),
			},
			mounted:function(){
				this.init()
			},
			computed:{
				total_count:function(){
					var self=this;
					var pc=0;
					for(var i=0;i<self.list.length;i++){
						pc+=self.list[i].carProductCount;
					}
					return pc;
				},
				total_price:function(){
					var self=this;
					var pc=0;
					for(var i=0;i<self.list.length;i++){
						pc+=self.list[i].carTotalPrice;
					}
					return pc;
				},
			},
			created:function(){
				this.dengl()
			},
			methods:{
				dengl:function(){
//						var uuu=window.sessionStorage.getItem('loginUsername');
						if(this.uuu==null){
							this.omg="登录";														
						}else{
								this.omg=this.uuu;
						}													
					},
					jump:function(){
					if(this.uuu!=null){
						window.location.href="self_info.html";
					}else{
						window.location.href="login.html";
					}
				},
				init:function(){
					var self=this;
					//必须要写
					axios.defaults.withCredentials = true;
					axios.get(self.web_server+"select",{
					    params: {
					      UserId:self.lmuid,					     
					    }
					  })
					.then(function(response){
						var result=response.data;
						if(result.status==200){
							
							self.list=[];
							self.onetotalprice='';
							self.checkBox.checked=true;
							self.checkBox.items=[];
							self.checkBox.price=[];
						    self.jige=[];
						    self.totalprice=0;
						    self.carids=[];
						    self.geshu=0;
						    self.wzwcount=0;
						    self.wzwprice=0;
							
							
							console.log("请求200");
							self.list=result.data;
							self.list.forEach(function (item) {
								self.jige.push(item.id);	
					         	self.checkBox.items[item.carId] = true;
					         	self.totalprice+=item.carProductCount*item.productPrice;
					         	self.carids.push(item.carId);
					         	self.geshu+=item.carProductCount;
					         	self.$set(item,"checked",self.itemchecked);
					        });
					        for(var i=0;i<self.carids.length;i++){
								console.log(self.carids[i])
							};
					        console.log("总价是："+self.totalprice)
						}else{
							console.log("请求失败");
							location.href="cartempty.html";
						}
					})
					.catch(function(erro){
						console.log(erro.message);
					})
				},
				add:function(p,index){
					var self=this;
					if(this.list[index].carProductCount<9){
						this.list[index].carProductCount++;
						if(this.list[index].checked){
							this.totalprice+=this.list[index].productPrice;
							this.geshu++;
						}
					}
					var id=p.carId;
					var count=this.list[index].carProductCount;
					var op=this.list[index].carProductCount*p.productPrice;
					console.log(id+count+op);
					//必须要写
					axios.defaults.withCredentials = true;
					axios.get(self.web_server+"update",{
					    params: {
					      CarId:id,
					      ProductCount:count,
					      TotalPrice:op,
					      UserId:self.lmuid,					     
					    }
					  })
					.then(function(response){
						var result=response.data;
						if(result.status==200){
							//location.reload();
							console.log("数量改变成功")
							
						}else{
							console.log("数量改变失败");
						}
					})
					.catch(function(erro){
						console.log(erro.message);
					})
				},
				minus:function(p,index){
					var self=this;
					if(this.list[index].carProductCount>1){
						this.list[index].carProductCount--;
						if(this.list[index].checked){
							this.totalprice-=this.list[index].productPrice;
							this.geshu--;
						}
					}
					var id=p.carId;
					var count=this.list[index].carProductCount;
					var op=this.list[index].carProductCount*p.productPrice;
					//必须要写
					axios.defaults.withCredentials = true;
					axios.get(self.web_server+"update",{
					    params: {
					      CarId:id,
					      ProductCount:count,
					      TotalPrice:op,
					      UserId:self.lumid,
					    }
					  })
					.then(function(response){
						var result=response.data;
						if(result.status==200){
							//location.reload();
							console.log("数量改变成功")
							
						}else{
							console.log("数量改变失败");
						}
					})
					.catch(function(erro){
						console.log(erro.message);
					})
				},
				remove:function(p){
					var self = this;
					//必须要写
					console.log("点击了移除")
					axios.defaults.withCredentials = true;
					axios.get(self.web_server+"delete?CarId="+p.carId+"&UserId="+p.carUserId)
					.then(function(response){
						var result=response.data;
						console.log(result.status+"状态码");
						console.log(p.carUserId+"   userid是")
						if(result.status==200){
							self.init();
							//location.reload();
							console.log("移除成功")
						}else{
							console.log("移除失败");
							self.init();
						}
					})
					.catch(function(erro){
						console.log(erro.message);
					})
				},
				//实现全选
				checkedAll:function(index,e){
					var _this = this;
					this.geshu=0;
					this.carids=[];
					this.wzwcount=0;
					this.wzwprice=0;
					this.jige=[];
					this.totalprice=0;
			        this.list.forEach(function (item) {
			           _this.checkBox.items[item.carId] = !_this.checkBox.checked;
			           _this.jige.push(true);
			           _this.totalprice+=item.carProductCount*item.productPrice;
			           _this.carids.push(item.carId);
			           _this.geshu+=item.carProductCount;
			           _this.wzwcount+=item.carProductCount;
			           _this.wzwprice+=item.carProductCount*item.productPrice;
			           _this.$set(item,"checked",_this.itemchecked);
			        });
			        if(!e.target.checked){
			        	_this.jige=[];
			        	this.totalprice=0;
			        	this.carids=[];
			        	this.geshu=0;
			        	this.list.forEach(function (item) {
			        		_this.$set(item,"checked",false);
			        	});
			        	
			        };
			        for(var i=0;i<this.carids.length;i++){
						console.log(this.carids[i])
					};
					console.log(this.carids.length+"carids的长度")
			        
				},
				//实现反选
				checkItem:function(index,p,event){
					var self=this;
					console.log(event.target.checked)
					var obj = $(event.target);
					if(event.target.checked){
						this.jige.push(event.target.checked);
						this.totalprice+=p.carProductCount*p.productPrice;
						this.carids.push(p.carId);
						this.geshu+=p.carProductCount;
						this.$set(this.list[index],"checked",self.itemchecked);
					}else{
						this.jige.pop();
						this.totalprice-=p.carProductCount*p.productPrice;
						this.carids.splice(p.index,1);
						this.geshu-=p.carProductCount;
						this.$set(this.list[index],"checked",false);
					}
					for(var i=0;i<this.carids.length;i++){
						console.log(this.carids[i])
					}
					console.log(this.jige.length)
					if(this.jige.length===this.list.length){
						this.checkBox.checked=true;
					}else{
						this.checkBox.checked=false;
					}
				},
				/*去结算的方法，未写完，待补充*/
				close_an_account:function(){
					console.log("点击了结算");					
					var self=this;
					var params=new URLSearchParams();
					params.append("carId",JSON.stringify(this.carids));
					params.append("orderUserId",self.lmuid);
					params.append("orderTotalPrice",this.totalprice);
					params.append("orderComment","默认无备注");
					//必须要写
					axios.defaults.withCredentials = true;
					axios.post(web_server+"api/order/AddOrderServlet",params)
					.then(function(response){
						console.log(JSON.stringify(response))
						var result=response.data;
						if(result.status==200){
							window.sessionStorage.setItem('orderId',result.data[0].id);
							window.location.href="confirm.html";
						}
					})
					.catch(function(erro){
						console.log(erro.message)
					})
				},
				search:function(){
					
					
					window.sessionStorage.setItem("fuzzy","");
					if(1==1){
						window.location.href="search.html";
					}	
					
				}

			},
			
			

		})
	</script>
</html>
